<template>
  <div class="container">
    <div class="left">
      <div class="box">
        <div class="up">
          <div class="demo2">
            <div id="loading">
              <div id="loading-center">
                <div id="loading-center-absolute">
                  <div class="object" id="object_one"></div>
                  <div class="object" id="object_two"></div>
                  <div class="object" id="object_three"></div>
                  <div class="object" id="object_four"></div>
                  <div class="object" id="object_five"></div>
                  <div class="object" id="object_six"></div>
                  <div class="object" id="object_seven"></div>
                  <div class="object" id="object_eight"></div>
                  <div class="object" id="object_big"></div>
                </div>
              </div>
            </div>
          </div>
          <div style="transform:  translateX(70px);font-weight: 700">挑战杯</div>
        </div>

        <div class="down">
          <el-tag>指导教师</el-tag>
          <span>{{ item.teacher1 }}</span>
          <span>{{ item.teacher2 }}</span>
          <span>{{ item.teacher3 }}</span>
          <el-tag type="success"> 参赛学生</el-tag>
          <span>{{ item.name1 }}</span>
          <span>{{ item.name2 }}</span>
          <span>{{ item.name3 }}</span>
          <span>{{ item.name4 }}</span>
          <span>{{ item.name4 }}</span>
          <span>{{ item.name5 }}</span>
          <span>{{ item.name6 }}</span>
          <span>{{ item.name7 }}</span>
          <span>{{ item.name8 }}</span>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="up">
          <div class="title">在线审核</div>
        </div>
        <div class="down">
      <span :data-id="1" :class="now==1?'active':''" @click="change">
        <el-icon><Folder/></el-icon>
        ppt附件
      </span>
          <span :data-id="2" :class="now==2?'active':''" @click="change"><el-icon><DocumentRemove/></el-icon>
        pdf附件</span>
          <span :data-id="3" v-if='item.mp4!=""&&item.mp4!=undefined' :class="now==3?'active':''" @click="change">
        <el-icon><VideoCamera/></el-icon>视频材料</span>
          <span style="margin-left: 500px"></span>
          <el-button type="primary" :icon="Edit" circle @click="dialog=true"/>
          <el-button type="success" :icon="Back" circle @click="back"/>
        </div>

      </div>
      <div class="main">
        <div class="ppt" v-if="now==1" @click="read(item.ppt)">
          <img src="https://img2.baidu.com/it/u=3474391708,714040776&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt="">
        </div>
        <div class="pdf" v-if="now==2" @click="read(item.pdf)">
          <img
              src="https://is4-ssl.mzstatic.com/image/thumb/Purple125/v4/b2/b6/46/b2b6462d-a477-3927-72ac-80250d244c70/source/512x512bb.jpg"
              alt="">
        </div>
        <div class="mp4" v-if="now==3">
          <video :src="item.mp4" controls></video>
        </div>
      </div>
    </div>
    <el-drawer

        v-model="dialog"
        title="打分"

        direction="ltr"
        class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form" label-width="40">
          <el-form-item label="分数">
            <el-input type="number" v-model="form.score" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="评语">
            <el-input v-model="form.remark" autocomplete="off"/>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="dialog = false">Cancel</el-button>
          <el-button type="primary" @click="onClick">
            打分
          </el-button>
        </div>
        <div class="tip" style="color: #A8ABB2;margin-top: 20px">
          <el-icon><Discount /></el-icon> 提示：金奖（90分以上）银奖（86—90）铜奖（80一85）不得奖（80分以下）
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import {
  Edit,
  Back
} from '@element-plus/icons-vue'
import {ref, reactive,onMounted,inject} from "vue";
import {useRoute} from "vue-router";
import router from "@/router";
const axios = inject("$axios")
const form = reactive({
  score:"",
  remark:"",
  workid:"",
  judgeid:"18"
})
const dialog = ref(false)
const route = useRoute()
const item = reactive(route.params)
const read = (i) => {
  window.open(i)
}
const onClick = ()=>{
  form.workid = item.id
  if(form.score==''){
      ElMessage({
      type:"warning",
      message:"请完整填写信息"
    })
  } else
  axios.post("record",form).then(res=>{
    ElMessage({
      type:"success",
      message:res.data
    })
    setTimeout(()=>{
     router.push('/judge')

    },1000)
  })
}
const judgeid = window.localStorage.getItem("id")
onMounted(()=>{
  if(item.ppt==''||item.ppt==undefined){
    router.push("/judge")
  }
  axios.get("record?judgeid="+judgeid+"&workid="+item.id).then(res=>{
    if(res.code==1){
         ElMessage({
      type:"success",
      message:"已经打过分了"
    })
    setTimeout(()=>{
      router.push('/judge')
    },1000)
    }
  })
})
const back = ()=>router.push("/judge")
const now = ref(1)
const change = (e) => now.value = e.target.dataset.id
</script>

<style scoped lang="less">
.container {
  width: 90%;
  max-width: 1200px;
  display: flex;
  justify-content: flex-start;
  margin: 10px auto;

  .right {
    flex: 1;

    .top {
      background-color: #ffffff;
      padding: 10px;
      border-radius: 10px;

      .up {
        font-weight: 700;
      }

      .down {
        span {
          display: inline-block;
          padding: 10px;
          color: #909399;
        }

        .active {
          color: #409EFF;
          border-bottom: #409EFF 1px solid;
        }
      }
    }
  }

  .left {
    width: 200px;
    background-color: #ffffff;
    margin-right: 20px;
    min-height: 80vh;


    .up {
      display: flex;

      flex-direction: row;
      align-content: flex-start;

      transform: translateY(30px);
      border-bottom: 1px solid #E6E8EB;
      padding-bottom: 30px;
    }

    .down {
      color: #A8ABB2;
      transform: translateY(50px);
      display: flex;
      flex-direction: column;
      font-size: 14px;
      padding: 10px;

      span {
        display: block;
        padding: 10px;
        width: 80px;
        height: auto;

      }

      padding: 10px;
      width: auto;
    }
  }

  .main {
    width: 100%;
    background-color: #ffffff;
    margin: 10px auto;
    border-radius: 10px;
    min-height: 550px;
    text-align: center;

    .mp4 {

      video {
        width: 600px;
        height: 400px;
        margin: 10px auto;
      }
    }

  }
}
</style>